<template>
  <el-dialog
   :title="dialogTitle"
    :visible.sync="dialogVisible"
    @open="openDialog"
    class="cpuDialog elDialog"
    >
    <div class="dialog_main">
      <!-- 详情页--图表列 -->
      <div class="elRow firstRow" v-if="showChart">
        <div class="cpuDetail panel">
          <div class="inner">
            <div class='title'>
              <span class="icon"></span>
              <h3>{{textDetail.title}}</h3>
            </div>
            <div class="cpuText commondetail">
              <div class="text" style="margin-top:20px">
                <h2>{{textDetail.useTitle}}</h2>
                <p>{{textDetail.useData}}</p>
              </div>
              <!-- <div class="text">
                <h2>{{textDetail.averageTitle}}</h2>
                <p>{{textDetail.averageData}}</p>
              </div> -->
            </div>
          </div>
        </div>
        <div class="cpuDetail panel">
          <div class="inner">
              <div class='title'>
              <span class="icon"></span>
              <h3>{{chart1Title}}</h3>
            </div>
            <div class="cpuText chart">
              <pie-chart
                :showTitle="showTitle"
                :title="chart1_title"
                :subText="subtext"
                :isGroup="isGroup"
                :showLegend="showLegend"
                :chartData="chart1Data"
                :otherOptions="chart_option"
                :commonStyle="commonStyle"
              />
            </div>
          </div>
        </div>
        <div class="cpuDetail panel">
          <div class="inner">
            <div class='title'>
              <span class="icon"></span>
              <h3>{{chart2Title}}</h3>
            </div>
            <div class="cpuText chart">
              <pie-chart
                :showTitle="showTitle"
                :title="chart2_title"
                :subText="subtext"
                :isGroup="isGroup"
                :showLegend="showLegend"
                :chartData="chart2Data"
                :otherOptions="chart_option"
                :commonStyle="commonStyle"
                @pieClick="pieClick"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 表格列 -->
      <div class="elRow secRow">
        <div class="cpuDetail panel tableWrapper">
          <div class="inner">
            <!-- title -->
            <div class='title tableTitle'>
              <div>
                <span class="icon"></span>
                <h3>{{tableTitle}}</h3>
              </div>
              <div class="exportDiv" v-if="showExport">
                <span @click="handleExport">导出数据</span>
                <!-- <i>导出数据</i> -->
              </div>
            </div>
            <!-- 查询表单 -->
            <div class="toolbar">
              <dynamic-form :formData="formData" :formItem="formItem" @handleSearch="handleSearch"/>
            </div>
            <!-- 表格列表 -->
            <div class="cpuText commondetail">
              <cs-table
                id="CPUtable"
                :table-data="tableData"
                :table-label="tableLabel"
                :loading="loading"
                :isSelection="isSelection"
                :selection="selection"
                :cell-style='handelCellStyle'
                :tableHeaderColor="tableHeaderColor"
                >
                <template slot="accessStatus" slot-scope="scope">
                 <el-tag size="small" :type="scope.row.accessStatus === 1 ? 'success' : 'danger'">{{scope.row.accessStatus === 1 ? '在线' : '离线'}}</el-tag>
                </template>
              </cs-table>

            </div>
            <!-- 分页 -->
            <div class="elPaginationDiv">
              <el-pagination
                id="elPagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNo"
                :page-sizes="this.pageSizeList"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    formItem: {
      type: Array,
      default: () => []
    },
    page: {
      type: Object,
      default: () => {
        return {pageNo: 1, pageSize: 10, total: 0}
      }
    },
    showExport: {
      type: Boolean,
      default: false
    },
    showChart: {
      type: Boolean,
      default: true
    },
    textDetail: {
      type: Object,
      default: () => {
        return {
          title: '使用详情率',
          useTitle: '使用区间',
          useData: '70%~80%之间',
          averageTitle: '平均使用率',
          averageData: '0.7'
        }
      }
    },
    commonStyle: {
      type: Object,
      default: () => {}
    },
    dialogTitle: {
      type: String,
      default: '使用详情'
    },
    subtext: {
      type: String,
      default: '平均使用率(%)'
    },
    chart1_title: {
      type: String,
      default: '80'
    },
    chart2_title: {
      type: String,
      default: '80'
    },
    chart1Title: {
      type: String,
      default: '城市-CPU使用率'
    },
    chart2Title: {
      type: String,
      default: '类型-CPU使用率'
    },
    chart1Data: {
      type: Array,
      default: () => [1800, 4500, 5790, 2000, 2000]
    },
    chart2Data: {
      type: Array,
      default: () => [17, 23, 27, 33, 9]
    },
    tableTitle: {
      type: String,
      default: '主机CPU性能指标(70%~80%区间)'
    },
    tableLabel: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    isSelection: {
      type: Boolean,
      default: true
    },
    selection: {
      type: String,
      default: 'selection'
    }
  },
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      pageSizeList: [10, 20, 40, 50],
      themeName: '',
      loading: false,
      dialogVisible: false,
      showTitle: true,
      isGroup: true,
      showLegend: true,
      city_chartData: [],
      // chart_option: {},
      // commonStyle: {}
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      // tablemaxHeight: 400,
      tableHeaderColor: {
        'background-color': '#ccc',
        'color': '#262626',
        'font-wight': 500,
        'font-size': '14px',
        'text-align': 'center'
      },
      chart_option: {
        title: {
          x: '34%',
          y: '48%',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#262626',
            fontSize: 10
          }
        },
        legend: {
          orient: 'vertical', // 垂直：vertical； 水平 horizontal
          right: '4%',
          itemWidth: 15,
          itemHeight: 10
        },
        series: [
          {
            center: ['35%', '56%'],
            radius: ['45%', '78%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#f19e9c', '#f8cd77', '#98d26f', '#a98cd1', '#6caded']
                  colorList = colorList.reverse()
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    '{percent|' + params.percent.toFixed(0) + '%}'
                  )
                },
                padding: [-35, -35, -20, -35],
                rich: {
                  color: '#333',
                  percent: {
                    color: '#262626',
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            labelLine: {
              normal: {
                length: 12,
                length2: 40,
                lineStyle: {
                  width: 1
                }
              }
            }
          }
        ]
      }
    }
  },
  components: {
    'PieChart': () => import('@/components/echarts/pie'),
    'CsTable': () => import('@/components/cs-table'),
    'DynamicForm': () => import('../DynamicForm')
  },
  created () {
  },
  methods: {
    // 打开对话框的回调
    openDialog () {
      let timer = localStorage.getItem('timer')
      clearInterval(timer)
    },
    init () {
      this.dialogVisible = true
      this.themeName = localStorage.getItem('themeName')
      this.pageSizeList[0] = this.page.pageSize
    },
    // 查询
    handleSearch (data) {
      this.$emit('handleSearch', data)
    },
    // 导出
    handleExport () {
      this.$emit('handleExport', this.dialogTitle)
    },
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    pieClick (val) {
      this.$emit('onlineClick', val)
    },
    // 表格颜色
    tableHeaderColorFun () {
      if (this.themeName === 'theme-light') {
        return 'background-color:#ccc;color:#262626;font-wight:500;font-size:14px;text-align:center'
      } else {
        return 'background-color:#ccc;color:#262626;font-wight:500;font-size:14px;text-align:center'
      }
    },
    // 表格样式
    handelCellStyle ({row, rowIndex}) {
      if (rowIndex % 2 !== 1) {
        if (this.themeName === 'theme-light') {
          return 'background-color:#fff;color:#262626;font-wight:500;font-size:14px;text-align:center'
        } else {
          return 'background-color:#fff;color:#262626;font-wight:500;font-size:14px;text-align:center'
        }
        // return 'background-color:#0b132e;color:#fff;font-wight:500;font-size:14px;text-align:center'
      } else {
        // return 'background-color:#102244;color:#fff;font-wight:500;font-size:14px;text-align:center'
        if (this.themeName === 'theme-light') {
          return 'background-color:#fff;color:#262626;font-wight:500;font-size:14px;text-align:center'
        } else {
          return 'background-color:#fff;color:#262626;font-wight:500;font-size:14px;text-align:center'
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '@/assets/style/common.scss';
  .cpuDetail {
    width: 100%;
    height: 100%;
    border: #0153bf 1px solid;
    h3 {
      height: 1.875rem;
      line-height: 1.875rem;
      padding: 0.3125rem 0.625rem;
      color: #FFFFFF;
      border-bottom: 1px solid #0153bf;
      background-color: #0c1e50;
      // .h3Tag {
      //   width: 0.3125rem;
      //   height: 1.5625rem;
      //   display: inline-block;
      //   background-color: #02d0e6;
      // }
    }
    .commondetail{
      padding: 1rem;
      padding-top: 0;
    }
    .cpuText {
      // width: 100%;
      height: 78%;
      // padding: 1rem;
      h2, p {
        color: #262626
      }
      .text {
        margin-bottom: 1.875rem;
        h2 {
          margin-bottom: 1.25rem;
        }
        p{
          font-size: 20px;
        }
      }
    }
  }
  .tableTitle {
    display: flex;
    justify-content: space-between;
    div{
      display: flex;
      align-items: center;
    }
    span,h3{
      display: inline-block;
      font-style: normal;
    }
    .exportDiv{
      margin-right: 40px;
      cursor: pointer;
      span{
        padding: 5px 10px;
        font-size: 12px;
        border: 1px solid #fff;
        border-radius: 5px;
        &:hover {
          background: rgba($color: #fff, $alpha: 0.1);
        }
      }
    }
  }
  .toolbar {
    padding: 8px 10px 0 10px;
  }
  #CPUtable{
    height: 100%;
  }
  .elPaginationDiv{
    position: absolute;
    bottom: 10px;
  }
  .el-pagination {
    // margin-bottom: 0.625rem;
    margin-left: 1.25rem;
  }
</style>
